import classNames from 'classnames';
import { styled } from 'styled-components';

export const UploaderTipsRender = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;

  // 文件规范
  .uploader-tips {
    line-height: 24px;
    font-size: 13px;

    &-group {
      position: relative;
    }

    &-title {
      margin-top: 16px;
      margin-bottom: 5px;
      font-size: 14px;
      font-weight: bold;
      color: #353535;
    }
    &-list {
    }
    &-item {
      position: relative;
      line-height: 22px;
      padding-left: 16px;
      color: #777;

      &:before {
        content: '';
        position: absolute;
        left: 2px;
        top: 10px;
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background-color: #415fff;
      }
      &.is-simple {
        padding-left: 0;
        &:before {
          display: none;
        }
      }
    }
  }
`;

export interface ITipsGroupItem {
  title?: React.ReactNode;
  list: React.ReactNode[];
}

interface Props {
  /** 附件说明 */ tips?: ITipsGroupItem[];
  /** 是否显示行前小圆点 */ isSimple?: boolean;
}

export const UploaderTips: React.FC<Props> = (props) => {
  const { tips, isSimple } = props;

  return (
    <UploaderTipsRender>
      <div className="uploader-tips">
        {tips?.map((item, idx) => {
          return (
            <div key={idx} className="uploader-tips-group">
              {item.title && (
                <div className="uploader-tips-title">{item.title}</div>
              )}
              <div className="uploader-tips-list">
                {item.list.map((litem, lidx) => {
                  return (
                    <div
                      key={lidx}
                      className={classNames(`uploader-tips-item`, {
                        [`is-simple`]: isSimple === true,
                      })}>
                      {litem}
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </UploaderTipsRender>
  );
};
